<template>
  <div>

    <el-container >
      <el-aside width="175px" style="position: fixed;">
      <div style="text-align: left;margin-left: 30px;">
        <el-icon style="font-size: 30px;margin-top: 10px;margin-bottom: 15px;"><Menu /></el-icon>
      </div>
        <hr style="margin-left:10px;margin-right: 10px">
        <el-menu>
          <el-popover placement="right" :width="160" trigger="hover" >
            <template #reference>
              <el-button style="border:0px;margin:0px 5px 5px 0px;padding-left:0px;width: 155px;height: 50px;font-size: 20px;text-align: left;text-decoration-color: #333333" round><el-icon style="font-size: 30px;color: #0aa1ed"><School /></el-icon>酒店</el-button>
            </template>
            <el-menu style="border: 0">
              <el-menu-item >国内酒店</el-menu-item>
              <el-menu-item >国外酒店</el-menu-item>
            </el-menu>
          </el-popover>

          <el-popover placement="right" :width="160" trigger="hover">
            <template #reference>
              <el-button style="padding-left:0px;border:0px;margin:0px 5px 5px 0px;width: 155px;height: 50px;font-size: 20px;text-align: left;text-decoration-color: #333333" round><el-icon style="font-size: 30px;color: #0aa1ed"><Promotion /></el-icon>机票</el-button>
            </template>
            <el-menu style="border: 0">
              <el-menu-item >国内/国际/中国港澳台</el-menu-item>
              <el-menu-item >特价机票</el-menu-item>
              <el-menu-item >航班动态</el-menu-item>
              <el-menu-item >值机选座</el-menu-item>
              <el-menu-item >退票改签</el-menu-item>
              <el-menu-item >报销凭证</el-menu-item>
              <el-menu-item >机场攻略</el-menu-item>
              <el-menu-item >机场攻略</el-menu-item>
            </el-menu>
          </el-popover>

          <el-popover placement="right" :width="160" trigger="hover" >
            <template #reference>
              <el-button style="border:0px;margin:0px 5px 5px 0px;width: 155px;height: 50px;font-size: 20px;text-align: left;text-decoration-color: #333333" round><el-icon style="font-size: 30px;color: #0aa1ed"><Guide /></el-icon>火车票</el-button>
            </template>
            <el-menu style="border: 0">
              <el-menu-item >国内火车票</el-menu-item>
              <el-menu-item >国际/中国港澳台</el-menu-item>
            </el-menu>
          </el-popover>

          <el-popover placement="right" :width="160" trigger="hover" >
            <template #reference>
              <el-button style="border:0px;margin:0px 5px 5px 0px;width: 155px;height: 50px;font-size: 20px;text-align: left;text-decoration-color: #333333;padding-left:0px;" round><el-icon style="font-size: 30px;color: #0aa1ed"><Flag /></el-icon>旅游</el-button>
            </template>
            <el-menu style="border: 0">
              <el-menu-item >旅游首页</el-menu-item>
              <el-menu-item >跟团游</el-menu-item>
              <el-menu-item >私家团</el-menu-item>
              <el-menu-item >自由行</el-menu-item>
              <el-menu-item >游轮</el-menu-item>
              <el-menu-item >一日游</el-menu-item>
              <el-menu-item >定制旅行</el-menu-item>
              <el-menu-item >周边游</el-menu-item>
              <el-menu-item >高端游</el-menu-item>
              <el-menu-item >主题游</el-menu-item>
              <el-menu-item >游学</el-menu-item>
              <el-menu-item >签证</el-menu-item>
              <el-menu-item >保险</el-menu-item>
              <el-menu-item >企业会奖</el-menu-item>
              <el-menu-item >目的地</el-menu-item>
            </el-menu>
          </el-popover>



          <el-button style="border:0px;margin:0px 5px 5px 0px;width: 160px;height: 50px;font-size: 20px;text-align: left;text-decoration-color: #333333" round><el-icon style="font-size: 30px;color: #0aa1ed"><Management /></el-icon>攻略▪景点</el-button>

          <el-popover placement="right" :width="160" trigger="hover" >
            <template #reference>
              <el-button style="border:0px;margin:0px 16px 5px 0px;width: 155px;height: 50px;font-size: 20px;text-align: left;text-decoration-color: #333333" round><el-icon style="font-size: 30px;color: #0aa1ed"><Ship /></el-icon>汽车▪船票</el-button>
            </template>
            <el-menu style="border: 0">
              <el-menu-item >汽车票</el-menu-item>
              <el-menu-item >船票</el-menu-item>
            </el-menu>
          </el-popover>


          <el-button style="border:0px;margin:0px 5px 5px 0px;width: 155px;height: 50px;font-size: 20px;text-align: left;text-decoration-color: #333333" round><el-icon style="font-size: 30px;color: #0aa1ed"><Ticket /></el-icon>门票▪活动</el-button>

          <el-popover placement="right" :width="160" trigger="hover" >
            <template #reference>
              <el-button style="border:0px;margin:0px 16px 5px 0px;width: 155px;height: 50px;font-size: 20px;text-align: left;text-decoration-color: #333333;padding-left:0px;" round><el-icon style="font-size: 30px;color: #0aa1ed"><Van /></el-icon>用车</el-button>
            </template>
            <el-menu style="border: 0">
              <el-menu-item >国内租车</el-menu-item>
              <el-menu-item >境外租车</el-menu-item>
              <el-menu-item >接送机站</el-menu-item>
              <el-menu-item >按天包车</el-menu-item>
            </el-menu>
          </el-popover>

          <el-popover placement="right" :width="160" trigger="hover" >
            <template #reference>
              <el-button style="border:0px;margin:0px 5px 5px 0px;width: 155px;height: 50px;font-size: 20px;text-align: left;text-decoration-color: #333333" round><el-icon style="font-size: 30px;color: #0aa1ed"><GoodsFilled /></el-icon>全球购</el-button>
            </template>
            <el-menu style="border: 0">
              <el-menu-item >名店购</el-menu-item>
              <el-menu-item >银联特惠</el-menu-item>
              <el-menu-item >外币兑换</el-menu-item>
            </el-menu>
          </el-popover>


          <el-popover placement="right" :width="160" trigger="hover" >
            <template #reference>
              <el-button style="border:0px;margin:0px 5px 5px 0px;width: 155px;height: 50px;font-size: 20px;text-align: left;" round><el-icon style="font-size: 30px;color: #0aa1ed"><Present /></el-icon>礼品卡</el-button>
            </template>
            <el-menu style="border: 0">
              <el-menu-item >礼品卡首页</el-menu-item>
              <el-menu-item >企业采购</el-menu-item>
              <el-menu-item >心意送礼</el-menu-item>
              <el-menu-item >礼品卡福袋</el-menu-item>
            </el-menu>
          </el-popover>
          <hr style="margin-left:10px;margin-right: 10px">
          <el-button style="border:0px;margin:0px 5px 5px 0px;width: 155px;height: 50px;font-size: 20px;text-align: left;" round><el-icon style="font-size: 30px;color: #0aa1ed"><TrendCharts /></el-icon>企业商旅</el-button>
          <el-button style="border:0px;margin:0px 5px 5px 0px;width: 155px;height: 50px;font-size: 20px;text-align: left;" round><el-icon style="font-size: 30px;color: #0aa1ed"><Coin /></el-icon>携程金融</el-button>
          <el-button style="border:0px;margin:0px 5px 5px 0px;width: 155px;height: 50px;font-size: 20px;text-align: left;" round><el-icon style="font-size: 30px;color: #0aa1ed"><Avatar /></el-icon>老友会</el-button>
        </el-menu>
      </el-aside>

      <el-main style="margin-left: 160px">
        <img src="xc.png" width="220" height="40px" style="position: relative;left: -530px;top: 0px">
        <el-form style="width: 340px" >
          <el-input placeholder="搜索任何旅游相关"
                    style="position: relative;left: 260px;top: -40px" >
          </el-input>
          <el-button type="primary" style="position: relative;left: 410px;top: -72px"><el-icon><Search /></el-icon></el-button>
          <el-card style="background: linear-gradient(to right,#75BDFA,white);
              width: 820px;height: 290px;margin-top: -50px ">
            <img src="2.png" width="50%" style="margin-left: -430px;margin-top: -20px">
            <span style="position: absolute;font-size: 27px;margin-left: -375px;color: white;">预订酒店</span>
            <img src="1.png" width="11%" style="position: absolute;margin-left: 240px;margin-top: 5px">
            <el-card style="background-color: white;height: 80px;width: 780px;margin-top: -20px;position: absolute;" >
              <el-menu>
                <el-menu-item style="width: 340px;height: 80px;margin-top: -19px;margin-left: -20px;border-right: 1px solid #eee">
                  <label style="margin-top: -35px">目的地/酒店名称</label>
                  <div class="inputDeep" >
                    <el-input style="margin-top: 25px;margin-left: -110px;width: 250px;" type="text" placeholder="城市、机场、区域、地标或酒店名称"></el-input>
                  </div>
                </el-menu-item>

                <el-menu-item style="width: 185px;height: 80px;margin-top: -80px;margin-left: 320px;">
                  <label style="margin-top: -35px">入住</label>
                  <div class="inputDeep" >
                    <el-input style="margin-top: 25px;margin-left: -37px;width: 170px;" type="text" ></el-input>
                  </div>
                </el-menu-item>
                <el-menu-item style="width: 70px;height: 80px;margin-top: -80px;margin-left: 505px">
                  <label style="margin-top: -10px;margin-left: -10px">－1晚－</label>
                </el-menu-item>

                <el-menu-item style="width: 185px;height: 80px;margin-top: -80px;margin-left: 575px;position:absolute;">
                  <label style="margin-top: -35px;margin-left: 120px;">退房</label>
                  <div class="inputDeep" >
                    <el-input style="margin-top: 0px;margin-left: -150px;width: 150px;position: absolute" type="text" ></el-input>
                  </div>
                </el-menu-item>
              </el-menu>
            </el-card>

            <el-card style="background-color: white;height: 80px;width: 575px;margin-top: 75px;position: absolute">
              <el-menu>
                <el-menu-item style="width: 145px;height: 80px;margin-top: -20px;margin-left: -20px;border-right: 1px solid #eee">
                  <label style="margin-top: -35px">房间及住客</label>
                  <div class="inputDeep" >
                      <el-select
                          v-model="value"
                          placeholder=""
                          value-key=""
                          style="margin-top: 25px;margin-left: -80px;width: 130px;" type="text"
                      >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                      </el-select>
                  </div>
                </el-menu-item>

                <el-menu-item style="width: 195px;height: 80px;margin-top: -80px;margin-left: 125px;border-right: 1px solid #eee">
                  <label style="margin-top: -35px">酒店级别</label>
                  <div class="inputDeep" >
                    <el-select
                        v-model="value"
                        placeholder=""
                        style="margin-top: 25px;margin-left: -60px;width: 150px;" type="text"
                    >
                      <el-option
                          v-for="item in options1"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                      />
                    </el-select>
                  </div>
                </el-menu-item>

                <el-menu-item style="width: 235px;height: 80px;margin-top: -80px;margin-left: 320px">
                  <label style="margin-top: -35px">关键词(选填)</label>
                  <div class="inputDeep" >
                    <el-input style="margin-top: 25px;margin-left: -90px;width: 220px;" type="text" placeholder="机场/火车站/酒店名称"></el-input>
                  </div>
                </el-menu-item>
              </el-menu>
            </el-card>
            <el-button :icon="Search" style="position: absolute;
            margin-top: 163px;margin-left: 220px;width: 190px;height: 80px;font-size: 22px" type="primary">搜索</el-button>
          </el-card>
        </el-form>

        <label style="position: absolute;margin-left: -635px;margin-top: 30px;font-size: 23px">酒店</label>
        <label style="position: absolute;margin-left: -590px;margin-top: 30px;font-size: 23px;color: #FF7700">推荐</label>

        <el-menu  mode="horizontal" style="position: absolute;margin-left: 400px;margin-top: 20px; border: none;" default-active="4">
          <el-menu-item style="font-size: 16px" index="1">上海</el-menu-item>
          <el-menu-item style="font-size: 16px;margin-left: 20px"index="2">北京</el-menu-item>
          <el-menu-item style="font-size: 16px;margin-left: 20px"index="3">广州</el-menu-item>
          <el-menu-item style="font-size: 16px;margin-left: 20px"index="4">杭州</el-menu-item>
          <el-sub-menu index="5">
            <template #title>更多</template>
            <el-menu-item index="5-1"></el-menu-item>
            <el-menu-item index="5-2"></el-menu-item>
            <el-menu-item index="5-3"></el-menu-item>
          </el-sub-menu>
        </el-menu>

        <el-carousel style="margin-top: 90px;margin-left: 10px;width: 810px;height: 280px" >
          <el-carousel-item >
            <el-row :gutter="5">
              <el-col :span="8" >
                <el-card style="width: 240px; height:280px; margin-left: 10px;">
                  <img src="h1.jpg" style="width: 240px;height: 160px;margin-top: -20px;margin-left: -20px">
                  <label style="position: absolute;margin-left: -107px;margin-top: 10px"><b>杭州钱江新城禧玥酒店</b></label>
                  <img src="a4.png" style="position: absolute;margin-top: 35px;margin-left: -110px;width: 8%">
                  <el-button type="primary" style="position: absolute;margin-top: 55px;
                      margin-left: -107px;width: 50px;height: 25px">
                    <label>4.9<label style="font-size: 10px">/5</label></label>
                  </el-button>
                  <label style="position: absolute;margin-top: 56px;margin-left: -55px;font-size: 14px;color: #0aa1ed">超棒</label>
                  <label style="position: absolute;margin-top: 88px;margin-left: -107px;font-size: 14px">1492条点评</label>
                  <label style="position: absolute;margin-top: 88px;margin-left: 70px;font-size: 18px"><b>¥781</b></label>
                </el-card>
              </el-col>

              <el-col :span="8" >
                <el-card style="width: 240px; height:280px; margin-left: 10px;">
                  <img src="h2.jpg" style="width: 240px;height: 160px;margin-top: -20px;margin-left: -20px">
                  <label style="position: absolute;margin-left: -107px;margin-top: 10px"><b>瑞都嘉里酒店</b></label>
                  <img src="a2.png" style="position: absolute;margin-top: 35px;margin-left: -110px;width: 5%">
                  <el-button type="primary" style="position: absolute;margin-top: 55px;
                      margin-left: -107px;width: 50px;height: 25px">
                    <label>4.4<label style="font-size: 10px">/5</label></label>
                  </el-button>
                  <label style="position: absolute;margin-top: 56px;margin-left: -55px;font-size: 14px;color: #0aa1ed">超棒</label>
                  <label style="position: absolute;margin-top: 88px;margin-left: -107px;font-size: 14px">656条点评</label>
                  <label style="position: absolute;margin-top: 88px;margin-left: 70px;font-size: 18px"><b>¥283</b></label>
                </el-card>
              </el-col>

              <el-col :span="8" >
                <el-card style="width: 240px; height:280px; margin-left: 10px;">
                  <img src="h3.jpg" style="width: 240px;height: 160px;margin-top: -20px;margin-left: -20px">
                  <label style="position: absolute;margin-left: -107px;margin-top: 10px"><b>杭州萧山国际机场凯悦酒店</b></label>
                  <img src="a4.png" style="position: absolute;margin-top: 35px;margin-left: -110px;width: 8%">
                  <el-button type="primary" style="position: absolute;margin-top: 55px;
                      margin-left: -107px;width: 50px;height: 25px">
                    <label>4.8<label style="font-size: 10px">/5</label></label>
                  </el-button>
                  <label style="position: absolute;margin-top: 56px;margin-left: -55px;font-size: 14px;color: #0aa1ed">超棒</label>
                  <label style="position: absolute;margin-top: 88px;margin-left: -107px;font-size: 14px">514条点评</label>
                  <label style="position: absolute;margin-top: 88px;margin-left: 70px;font-size: 18px"><b>¥700</b></label>
                </el-card>
              </el-col>
            </el-row>
          </el-carousel-item>

          <el-carousel-item >
            <el-row :gutter="5">
              <el-col :span="8" >
                <el-card style="width: 240px; height:280px; margin-left: 10px;">
                  <img src="h4.jpg" style="width: 240px;height: 160px;margin-top: -20px;margin-left: -20px">
                  <label style="position: absolute;margin-left: -107px;margin-top: 10px"><b>杭州钱江世纪城智选假日酒店</b></label>
                  <img src="a3.png" style="position: absolute;margin-top: 35px;margin-left: -110px;width: 6.5%">
                  <el-button type="primary" style="position: absolute;margin-top: 55px;
                      margin-left: -107px;width: 50px;height: 25px">
                    <label>4.6<label style="font-size: 10px">/5</label></label>
                  </el-button>
                  <label style="position: absolute;margin-top: 56px;margin-left: -55px;font-size: 14px;color: #0aa1ed">超棒</label>
                  <label style="position: absolute;margin-top: 88px;margin-left: -107px;font-size: 14px">138条点评</label>
                  <label style="position: absolute;margin-top: 88px;margin-left: 70px;font-size: 18px"><b>¥379</b></label>
                </el-card>
              </el-col>

              <el-col :span="8" >
                <el-card style="width: 240px; height:280px; margin-left: 10px;">
                  <img src="h5.jpg" style="width: 240px;height: 160px;margin-top: -20px;margin-left: -20px">
                  <label style="position: absolute;margin-left: -107px;margin-top: 10px"><b>杭州木棉花酒店</b></label>
                  <img src="a4.png" style="position: absolute;margin-top: 35px;margin-left: -110px;width: 8%">
                  <el-button type="primary" style="position: absolute;margin-top: 55px;
                      margin-left: -107px;width: 50px;height: 25px">
                    <label>4.6<label style="font-size: 10px">/5</label></label>
                  </el-button>
                  <label style="position: absolute;margin-top: 56px;margin-left: -55px;font-size: 14px;color: #0aa1ed">超棒</label>
                  <label style="position: absolute;margin-top: 88px;margin-left: -107px;font-size: 14px">256条点评</label>
                  <label style="position: absolute;margin-top: 88px;margin-left: 70px;font-size: 18px"><b>¥1094</b></label>
                </el-card>
              </el-col>

              <el-col :span="8" >
                <el-card style="width: 240px; height:280px; margin-left: 10px;">
                  <img src="h6.jpg" style="width: 240px;height: 160px;margin-top: -20px;margin-left: -20px">
                  <label style="position: absolute;margin-left: -107px;margin-top: 10px"><b>澜奢酒店</b></label>
                  <img src="a1.png" style="position: absolute;margin-top: 35px;margin-left: -110px;width: 3%">
                  <el-button type="primary" style="position: absolute;margin-top: 55px;
                      margin-left: -107px;width: 50px;height: 25px">
                    <label>4.6<label style="font-size: 10px">/5</label></label>
                  </el-button>
                  <label style="position: absolute;margin-top: 56px;margin-left: -55px;font-size: 14px;color: #0aa1ed">超棒</label>
                  <label style="position: absolute;margin-top: 88px;margin-left: -107px;font-size: 14px">1669条点评</label>
                  <label style="position: absolute;margin-top: 88px;margin-left: 70px;font-size: 18px"><b>¥196</b></label>
                </el-card>
              </el-col>
            </el-row>
          </el-carousel-item>




        </el-carousel>



        <div class="all" style="width: 820px;margin-left: 20px;margin-top: 30px">
          <div class="container" style="text-align: left">
            <span style="font-size:23px">当季</span>
            <span style="color:#FF7700;font-size:23px">热推</span>
            出发地 <el-select v-model="city" placeholder="选择一个城市" style="width:10%;">
            <el-option value="bj" label="北京"></el-option><el-option value="sh" label="上海"></el-option>
            <el-option value="cz" label="常州"></el-option><el-option value="wh" label="武汉"></el-option>
            <el-option value="qd" label="青岛"></el-option><el-option value="nj" label="南京"></el-option>
            <el-option value="sz" label="深圳"></el-option><el-option value="cs" label="长沙"></el-option>
            <el-option value="sy" label="三亚"></el-option><el-option value="xm" label="厦门"></el-option>
            <el-option value="fz" label="福州"></el-option><el-option value="jn" label="济南"></el-option>
          </el-select>
          </div>
          <div class="total" style="display: flex">
            <div class="left" >
              <h3>当季热卖--跟团游 <el-icon color=" #0aa1ed"><Position /> </el-icon></h3>
              <div class="product-container" style="width: 150%" >
                <div v-for="(item, index) in products" :key="index" class="product-item">
                  <div class="product-image-container" >
                    <img :src="item.src" :alt="item.name" class="product-image">
                  </div>
                  <div class="product-info">
                    <h3 class="product-name">{{ item.name }}</h3>
                    <div class="des">
                      <span style="color: #00aaff">{{item.text}}</span>
                      <span class="product-description">|{{ item.description }}</span>
                    </div>
                    <div class="product-price">
                      <span >{{ item.price }}</span>
                    </div></div></div></div></div>

            <div class="right" >
              <h3>周末畅游--特价机票 <el-icon color=" #0aa1ed"><Position /> </el-icon></h3>
              <div class="product-container" style="width: 150%;" >
                <div v-for="(item, index) in product1" :key="index" class="product-item">
                  <div class="product-image-container" >
                    <img :src="item.src" :alt="item.name" class="product-image">
                  </div>
                  <div class="product-info">
                    <h3 class="product-name"style="text-align: left">{{ item.name }}</h3>
                    <div class="dec">
                      <span style="color: green;">{{item.text}}</span>
                      <span class="product-description" >|{{ item.description }}</span>
                    </div>
                    <div class="product-price" >
                      <span >{{ item.price }}</span>
                    </div></div></div></div></div>
          </div>

          <div style="text-align: left">
            <span style="font-size:23px">探索</span>
            <span style="color:orange;font-size:23px">精彩世界</span>
            出发地 <el-select v-model="city" placeholder="选择一个城市" style="width:10%;">
            <el-option value="bj" label="北京"></el-option><el-option value="sh" label="上海"></el-option>
            <el-option value="cz" label="常州"></el-option><el-option value="wh" label="武汉"></el-option>
            <el-option value="qd" label="青岛"></el-option><el-option value="nj" label="南京"></el-option>
            <el-option value="sz" label="深圳"></el-option><el-option value="cs" label="长沙"></el-option>
            <el-option value="sy" label="三亚"></el-option><el-option value="xm" label="厦门"></el-option>
            <el-option value="fz" label="福州"></el-option><el-option value="jn" label="济南"></el-option>
          </el-select>
            <br>
            <video class="mp"
                   ref="videoPlayer"
                   src="video/yview1.mp4"
                   autoplay
                   muted
                   loop
                   controls
                   style="width: 100%; height: 100%; object-fit: cover;"
            ></video>
          </div>
        </div>


        <div style="margin-left: 20px">
        <h1 style="text-align: left;margin-bottom: 0px">企业商旅</h1>
        <el-row :gutter="20">
          <el-col :span="8" ><div class="grid-content ep-bg-purple" />
            <el-card style="background-color: #d9ecff">
              <img src='img2333/1.png' style="float: left ;width: 55px;margin-top: 25px;margin-right: 10px" >

              <h3 style="text-align: left ;margin-top: 0;margin-left:20px;">  一站式企业差旅服务</h3>
              <p style="text-align: left;color:grey">海量差旅产品，全流程服务，智能管控，助力企业成本节省高达30%！</p>
            </el-card>
          </el-col>
          <el-col :span="8" ><div class="grid-content ep-bg-purple" />
            <el-card style="background-color: #faecd8;">
              <img src='img2333/2.png' style="float: left;width: 55px;margin-top: 25px;margin-right: 10px" >

              <h3 style="text-align: left ;margin-top: 0;margin-left:20px;">  公对公结算</h3>
              <p style="text-align: left;color:grey">
                15分钟极速开通公司账户、30+20天超长账期，自助对账，统一开票、配送！</p>
            </el-card>
          </el-col>
          <el-col :span="8" ><div class="grid-content ep-bg-purple" />
            <el-card style="background-color: #e1f3d8">
              <img src='img2333/3.png' style="float: left;width: 55px;margin-top: 25px;margin-right: 10px" >

              <h3 style="text-align: left ;margin-top: 0;margin-left:20px;">  企业方案量身定制</h3>
              <p style="text-align: left;color:grey">
                强大的产品技术&服务解决方案 ，支持企业规模在500人以上中大型企业定制</p>
            </el-card>
          </el-col>



        </el-row>
        <h1 style="text-align: left ;margin-bottom: 0px">携程旅行保障</h1>
        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content ep-bg-purple" />
            <el-card >
              <img src='img2333/4.png' style="float: left;width: 55px;margin-top: 25px;margin-right: 10px" >

              <h3 style="text-align: left ;margin-top: 0;margin-left:20px;">  酒店 · 放心住</h3>
              <p style="text-align: left;color:grey">
                200多个国家121万家酒店确认订单后不涨价</p>
            </el-card>
          </el-col>

          <el-col :span="6"><div class="grid-content ep-bg-purple" />
            <el-card >
              <img src='img2333/5.png' style="float: left;width: 55px;margin-top: 25px;margin-right: 10px" >

              <h3 style="text-align: left ;margin-top: 0;margin-left:20px;">  机票 · 放心飞</h3>
              <p style="text-align: left;color:grey">
                近200万条全球航线选择

                一站式售后服务体验</p>
            </el-card>
          </el-col>

          <el-col :span="6"><div class="grid-content ep-bg-purple" />
            <el-card >
              <img src='img2333/6.png' style="float: left;width: 55px;margin-top: 25px;margin-right: 10px" >

              <h3 style="text-align: left ;margin-top: 0;margin-left:20px;">  火车票 · 放心行</h3>
              <p style="text-align: left;color:grey">
                价格透明，退票改签不收取

                额外费用，保障客人出行</p>
            </el-card>
          </el-col>

          <el-col :span="6"><div class="grid-content ep-bg-purple" /><el-card >
            <img src='img2333/7.png' style="float: left;width: 55px;margin-top: 25px;margin-right: 10px" >

            <h3 style="text-align: left ;margin-top: 0;margin-left:20px;">  旅游 · 放心玩</h3>
            <p style="text-align: left;color:grey">
              开放数万条旅游产品选择

              7*24小时应急救援体系</p>
          </el-card>
          </el-col>

          <el-col :span="6"><div class="grid-content ep-bg-purple" /><el-card >
            <img src='img2333/8.png' style="float: left;width: 55px;margin-top: 25px;margin-right: 10px" >

            <h3 style="text-align: left ;margin-top: 0;margin-left:20px;">  金融 · 放心付</h3>
            <p style="text-align: left;color:grey">
              多元化结款产品

              合规保障，专项服务</p>
          </el-card>
          </el-col>

          <el-col :span="6"><div class="grid-content ep-bg-purple" />
            <el-card >
              <img src='img2333/9.png' style="float: left;width: 55px;margin-top: 25px;margin-right: 10px" >

              <h3 style="text-align: left ;margin-top: 0;margin-left:20px;">  美食 · 放心吃</h3>
              <p style="text-align: left;color:grey">
                全城美食套餐性价比高

                品质优选，价格保障</p>
            </el-card>
          </el-col>

          <el-col :span="6"><div class="grid-content ep-bg-purple" /><el-card >
            <img src='img2333/10.png' style="float: left;width: 55px;margin-top: 25px;margin-right: 10px" >

            <h3 style="text-align: left ;margin-top: 0;margin-left:20px;">  会员 · 放心用</h3>
            <p style="text-align: left;color:grey">
              多种产品多种特权随心使用

              预订越多，积分奖励越多</p>
          </el-card>
          </el-col>

          <el-col :span="6"><div class="grid-content ep-bg-purple" /><el-card >
            <img src='img2333/11.png' style="float: left;width: 55px;margin-top: 25px;margin-right: 10px" >

            <h3 style="text-align: left ;margin-top: 0;margin-left:20px;">  直播 · 放心逛</h3>
            <p style="text-align: left;color:grey">
              旅游专项直播随时逛

              大BOSS定期开播</p>
          </el-card>
          </el-col>
          <el-row :gutter="20">
            <el-col :span="8"><div class="grid-content ep-bg-purple" /><img src='img2333/12.jpeg' style="width: 500px"></el-col>
            <el-col :span="8"><div class="grid-content ep-bg-purple" /><img src='img2333/13.png' style="width: 500px"></el-col>
            <el-col :span="8"><div class="grid-content ep-bg-purple" /><img src='img2333/14.png'style="width: 500px"></el-col>

          </el-row>
        </el-row>
      </div>
      </el-main>
    </el-container>
  </div>

  <div style="text-align: left;position: absolute;margin-left: 190px;margin-top: 20px;">
    <div class="navbar">
      <div><a href="#" style="text-decoration: none">合作伙伴：mttravat</a> <a href="#">铣友</a> <a href="#">途风</a> <a href="#">tua途家</a></div>
      <div><a href="#">携程导航：酒店预订</a> <a href="#">海外酒店</a> <a href="#">特价机票</a> <a href="#">国际机票</a> <a href="#">旅游线路</a> <a href="#">景点门票</a> <a href="#">旅游攻略</a> <a href="#">火车票</a> <a href="#">邮轮</a> <a href="#">周末游</a> <a href="#">签证</a> <a href="#">租车</a> <a href="#">欧铁通票</a> <a href="#">自由行</a> <a href="#">会议旅游</a> <a href="#">礼品卡</a> <a href="#">团队游</a> <a href="#">企业商旅</a></div>         <div><a href="#">酒店预订：北京酒店</a> <a href="#">上海酒店</a> <a href="#">广州酒店</a> <a href="#">深圳酒店</a> <a href="#">南京酒店</a> <a href="#">杭州酒店</a> <a href="#">成都酒店</a> <a href="#">厦门酒店</a> <a href="#">青岛酒店</a> <a href="#">三亚酒店</a> <a href="#">香港酒店</a> <a href="#">澳门酒店</a> <a href="#">西安酒店</a></div>
      <div><a href="#">特价机票：上海机票</a> <a href="#">北京机票</a> <a href="#">广州机票</a> <a href="#">深圳机票</a> <a href="#">重庆机票</a> <a href="#">成都机票</a> <a href="#">昆明机票</a> <a href="#">厦门机票</a> <a href="#">三亚机票</a> <a href="#">杭州机票</a> <a href="#">春秋航空</a> <a href="#">东方航空</a> <a href="#">南方航空</a></div>
      <div><a href="#">旅游度假：国内旅游攻略</a> <a href="#">出境旅游攻略</a> <a href="#">马尔代夫旅游</a> <a href="#">普吉岛旅游</a> <a href="#">巴厘岛旅游</a> <a href="#">济州岛旅游</a> <a href="#">日本旅游</a> <a href="#">新加坡旅游</a> <a href="#">澳大利亚旅游</a> <a href="#">迪拜旅游</a> <a href="#">柬埔寨旅游</a> <a href="#">英国旅游</a> <a href="#">法国旅游</a></div>
      <div><a href="#">攻略指南：攻略社区</a> <a href="#">旅游攻略</a> <a href="#">旅行游记</a> <a href="#">旅游问答</a> <a href="#">周末旅游</a> <a href="#">天气预报</a> <a href="#">地图大全</a> <a href="#">Travel Guide</a> <a href="#">企业商旅</a> <a href="#">中小企业差旅</a> <a href="#">商旅签证</a></div>
      <div><a href="#">快速入口：门票导航</a> <a href="#">精选目的地</a> <a href="#">存款证明</a> <a href="#">携程主题曲</a> <a href="#">航班时刻表</a> <a href="#">酒店导航</a> <a href="#">品牌酒店</a> <a href="#">酒店大全</a> <a href="#">酒店经营规则</a> <a href="#">国家酒店</a> <a href="#">eBooking</a> <a href="#">礼品卡</a></div>
    </div>
    <div class="footer">
      <div class="footer-column">
        <div class="bold"><a href="#">旅游资讯</a></div>
        <a href="#">宾馆索引</a> <a href="#">攻略索引</a>
        <a href="#">机票索引</a> <a href="#">网站导航</a>
        <a href="#">旅游索引</a> <a href="#">邮轮索引</a>
        <a href="#">企业差旅索引</a>
      </div>
      <div class="footer-column">
        <div class="bold"><a href="#">加盟合作</a></div>
        <a href="#">分销联盟</a> <a href="#">友情链接</a>
        <a href="#">企业礼品卡采购</a> <a href="#">保险代理</a>
        <a href="#">代理合作</a> <a href="#">酒店加盟</a>
        <a href="#">目的地及景区合作</a> <a href="#">更多加盟合作</a>
      </div>
      <div class="footer-column">
        <div class="bold"><a href="#">关于携程</a></div>
        <a href="#">关于携程</a> <a href="#">携程热点</a>
        <a href="#">联系我们</a> <a href="#">诚聘英才</a>
        <a href="#">企业公民</a> <a href="#">用户协议</a>
        <a href="#">隐私政策</a> <a href="#">营业执照</a>
        <a href="#">安全中心</a> <a href="#">携程内容中心</a>
        <a href="#">知识产权</a> <a href="#">Trip.com Group</a>
      </div>
      <div class="footer-column">
        <div><a href="#">中国澳门：+86-21 3406-4888</a></div>
        <div><a href="#">中国台湾：+86-21 3406-4888</a></div>
        <div><a href="#">其他国家和地区：+86-21-3406-4888</a></div>
        <div><a href="#">境内：95010或 400-830-6666</a></div>
        <div><a href="#">中国香港：+852-3008-3295</a></div>
      </div>

    </div>
  </div>

</template>

<script setup>



import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

import { ref } from 'vue'

const value = ref('')
const options = [
  {
    value: '1间',
    label: '房间',
  },
  {
    value: '1位成人',
    label: '成人',
  },
  {
    value: '1位儿童',
    label: '儿童',
  },
]
const options1 = [
  {
    value: '二星',
    label: '二星',
  },
  {
    value: '三星',
    label: '三星',
  },
  {
    value: '四星',
    label: '四星',
  },{
    value: '五星',
    label: '五星',
  },
]



const city = ref('北京');
const products=ref([
  {
    src: 'img_ly/y1.png',
    alt: 'Image 1',
    name:'北戴河+阿那亚3日2晚私家团·',
    text: '4.8分',
    description: '1189人出游',
    price: '¥1438'
  },
  {
    src: 'img_ly/y2.png',
    alt: 'Image 2',
    name:'木兰围场+坝上+乌兰布统',
    text: '4.9分',
    description: '157384人出游',
    price: '¥399'
  },
  {
    src: 'img_ly/y3.png',
    alt: 'Image 3',
    name:'秦皇岛+北戴河+山海关3日',
    text: '5.0分',
    description: '4564人出游',
    price: '¥899'
  },
  {
    src: 'img_ly/y4.png',
    alt: 'Image 4',
    name:'古北水镇2日1晚',
    text: '4.8分',
    description: '34753出游',
    price: '¥499'
  },
  {
    src: 'img_ly/y5.png',
    alt: 'Image 5',
    name:'山东济南+泰山+曲阜三孔景区',
    text: '4.9分',
    description: '75425人出游',
    price: '¥599'
  },])

const product1 = ref([
  {
    src: 'img_ly/y6.png',
    alt: 'Image 1',
    name:'北京--洛阳',
    text: '携程精选',
    description: '06-15 去 06-16 回   3.2折',
    price: '¥530'
  },
  {
    src: 'img_ly/y7.png',
    alt: 'Image 2',
    name:'北京--大连',
    text: '携程精选',
    description: '06-01 去 06-03 回  3.0折',
    price: '¥540'
  },
  {
    src: 'img_ly/y8.png',
    alt: 'Image 3',
    name:'北京--哈尔滨',
    text: '携程精选',
    description: '06-01 去 06-04 回  1.8折',
    price: '¥561'
  },
  {
    src: 'img_ly/y9.png',
    alt: 'Image 4',
    name:'北京--长春',
    text: '携程精选',
    description: '06-14 去 06-16 回  1.4折',
    price: '¥595'
  },
  {
    src: 'img_ly/y10.png',
    alt: 'Image 5',
    name:'北京--成都',
    text: '携程精选',
    description: '06-07 去 06-08回  1.3折',
    price: '¥600'
  }
])
 const mp =()=> {
   this.refs.videoPlayer.addEventListener("canplay", () => {
     this.efs.videoPlayer.play();
   })

 };
</script>


<style scoped>


body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: #f4f7f6;
}
.navbar, .footer {
  flex: 1;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.navbar {
  flex: 6;
  background-color: #fff; /* Light blue background */
  color: #333;
}
.footer {
  flex: 4;
  background-color: #fff; /* Light green background */
  color: #333;
}
.navbar div, .footer div {
  display: flex;
  justify-content: space-around; /* Distributes space evenly around items */
  flex-wrap: wrap;
  margin-bottom: 10px; /* Increased line spacing */
}
.navbar a, .footer a {
  color: #333;
  text-decoration: none;
  margin: 5px 10px;
  font-size: 10px;
}
.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bold {
  font-weight: bold;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.inputDeep >>> .el-select__wrapper { border: 0px; box-shadow: 0 0 0 0px; }
.inputDeep >>> .el-input__wrapper { border: 0px; box-shadow: 0 0 0 0px; }


.total{
  overflow: auto;
}
.product-container {
  display: flex;
  flex-wrap: wrap; /* 如果需要换行显示商品 */
}

.product-item {
  display: flex;
  align-items: flex-start; /* 垂直对齐 */
  margin-bottom: 20px; /* 垂直间距 */
}

.product-image-container {
  flex: 0 0 auto; /* 图片宽度固定或按比例缩放 */
  margin-right: 20px; /* 图片与文字的间距 */
}

.product-image {
  width: 150px; /* 图片宽度 */
  height: auto; /* 保持图片比例 */
}

.product-info {
  flex: 1; /* 文字部分占据剩余空间 */
}

.product-name {
  font-size: 15px; /* 商品名称字体大小 */
  margin-bottom: 10px; /* 商品名称与描述之间的间距 */
}
.des{
  text-align: left;
  margin-bottom: 15px;
}

.product-description {
  font-size: 14px; /* 商品描述字体大小 */
  color: #666; /* 商品描述颜色 */
}

.product-price{
  display: flex;
  font-size: 18px; /* 价格值字体大小 */
  text-align: right;
  color: #0af; /* 价格颜色 */

}

.left {
  position: relative;
  width: 500px;
  height: 700px;
  overflow: hidden; /* 确保内容不会溢出到伪元素上 */
}
.dec{
  text-align: left;
  margin-bottom: 15px;
}
.right{
  float: right;
  /* 或其他你想要的宽度 */
  box-sizing: border-box;
  position: relative;
  width: 500px;
  height: 700px;
  overflow: hidden;
}
</style>